$(() => {
  const fontColor = "#4c9bfd";
  // 点位分布图
  function pointChart() {
    let myChart = echarts.init(document.querySelector(".point-chart"));
    let option = {
      series: [
        {
          type: "pie",
          radius: [10, 80],
          center: ["50%", "50%"],
          roseType: "area",
          color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff",
          ],
          data: [
            { value: 20, name: "云南" },
            { value: 26, name: "北京" },
            { value: 24, name: "山东" },
            { value: 25, name: "河北" },
            { value: 20, name: "江苏" },
            { value: 25, name: "浙江" },
            { value: 30, name: "四川" },
            { value: 42, name: "湖北" },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
  pointChart();

  //全国用户量统计
  function userChart() {
    const item = {
      value: 1200,
      itemStyle: {
        color: "#254065",
      },
    };
    let myChart = echarts.init(document.querySelector(".user-chart"));
    let option = {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: "#00f8f9" },
        { offset: 1, color: "#0067d0" },
      ]),
      grid: {
        containLabel: true,
        left: 0,
        top: 10,
        right: 10,
        bottom: 0,
      },
      xAxis: {
        type: "category",
        data: [
          "上海",
          "广州",
          "北京",
          "深圳",
          "合肥",
          "",
          "......",
          "",
          "杭州",
          "厦门",
          "济南",
          "成都",
          "重庆",
        ],
        axisLabel: {
          show: true,
          color: fontColor,
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          show: true,
          color: fontColor,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "#004e61",
          },
        },
      },
      series: [
        {
          data: [
            2100,
            1900,
            1700,
            1560,
            1400,
            item,
            item,
            item,
            900,
            750,
            600,
            480,
            240,
          ],
          type: "bar",
        },
      ],
    };
    myChart.setOption(option);
  }
  userChart();

  // 销售额统计
  function sellChart() {
    let index = 0;
    let myChart = echarts.init(document.querySelector(".sell-chart"));
    const dataAll = [
      {
        expect: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        actual: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
      },
      {
        expect: [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        actual: [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34],
      },
      {
        expect: [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        actual: [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
      },
      {
        expect: [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        actual: [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24],
      },
    ];
    function initChart() {
      let option = {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#00f8f9" },
          { offset: 1, color: "#0067d0" },
        ]),
        grid: {
          containLabel: true,
          left: 0,
          top: 30,
          right: 0,
          bottom: 0,
        },
        legend: {
          data: ["预期销售额", "实际销售额"],
          right: 30,
          textStyle: {
            color: fontColor,
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisLabel: {
            show: true,
            color: "#4c9bfd",
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            color: "#4c9bfd",
          },
          name: "单位:万",
          nameLocation: "end",
          nameTextStyle: {
            align: "left",
            color: fontColor,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#004e61",
            },
          },
        },
        series: [
          {
            name: "预期销售额",
            type: "line",
            // stack: "总量",
            data: dataAll[index].expect,
            smooth: true,
            itemStyle: {
              color: "#00f2f1",
            },
          },
          {
            name: "实际销售额",
            type: "line",
            // stack: "总量",
            data: dataAll[index].actual,
            smooth: true,
            itemStyle: {
              color: "#e63e35",
            },
          },
        ],
      };
      myChart.setOption(option);
    }
    initChart();
    setInterval(() => {
      index++;
      if (index > 3) index = 0;
      // console.log(index);
      $(".date>li")
        .eq(index)
        .addClass("current")
        .siblings()
        .removeClass("current");
      initChart();
    }, 1500);
  }
  sellChart();

  // 季度销售进度
  function progressChart() {
    const linearColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: "#00f8f9" },
      { offset: 1, color: "#0067d0" },
    ]);
    let myChart = echarts.init(document.querySelector(".progress-chart"));
    let option = {
      series: [
        {
          type: "pie",
          radius: [54, 65],
          center: ["50%", "100%"],
          color: ["#12274d", "transparent", linearColor],
          data: [
            { value: 1, name: "" },
            { value: 2, name: "" },
            { value: 1, name: "" },
          ],
          labelLine: {
            show: false,
          },
        },
      ],
    };
    myChart.setOption(option);
  }
  progressChart();

  function migrateChart() {
    var chinaGeoCoordMap = {
      福建: [119.4543, 25.9222],
      泉州: [118.4543, 25.0222],
      大庆: [126.9688, 45.868],
      内蒙古: [110.3467, 41.4899],
      吉林: [125.8154, 44.2584],
      北京: [116.4551, 40.2539],
      辽宁: [123.1238, 42.1216],
      河北: [114.4995, 38.1006],
      天津: [117.4219, 39.4189],
      山西: [112.3352, 37.9413],
      陕西: [109.1162, 34.2004],
      甘肃: [103.5901, 36.3043],
      宁夏: [106.3586, 38.1775],
      青海: [101.4038, 36.8207],
      新疆: [87.9236, 43.5883],
      西藏: [91.11, 29.97],
      四川: [103.9526, 30.7617],
      重庆: [108.384366, 30.439702],
      山东: [117.1582, 36.8701],
      河南: [113.4668, 34.6234],
      江苏: [118.8062, 31.9208],
      安徽: [117.29, 32.0581],
      湖北: [114.3896, 30.6628],
      浙江: [119.5313, 29.8773],
      黑龙江: [127.9688, 45.368],
      江西: [116.0046, 28.6633],
      湖南: [113.0823, 28.2568],
      贵州: [106.6992, 26.7682],
      云南: [102.9199, 25.4663],
      广东: [113.12244, 23.009505],
      广西: [108.479, 23.1152],
      海南: [110.3893, 19.8516],
      上海: [121.4648, 31.2891],
    };
    let chinaDatas = [
      [
        {
          name: "黑龙江",
          value: 0.88,
        },
      ],
      [
        {
          name: "内蒙古",
          value: 0.12,
        },
      ],
      [
        {
          name: "吉林",
          value: 0.89,
        },
      ],
      [
        {
          name: "辽宁",
          value: 0.86,
        },
      ],
      [
        {
          name: "河北",
          value: 0.88,
        },
      ],
      [
        {
          name: "北京",
          value: 0.83,
        },
      ],
      [
        {
          name: "天津",
          value: 0.71,
        },
      ],
      [
        {
          name: "山西",
          value: 0.63,
        },
      ],
      [
        {
          name: "陕西",
          value: 0.56,
        },
      ],
      [
        {
          name: "宁夏",
          value: 0.17,
        },
      ],
      [
        {
          name: "云南",
          value: 0.11,
        },
      ],
      [
        {
          name: "四川",
          value: 1,
        },
      ],
      [
        {
          name: "重庆",
          value: 0.8,
        },
      ],
      [
        {
          name: "山东",
          value: 0.77,
        },
      ],
      [
        {
          name: "河南",
          value: 0.75,
        },
      ],
      [
        {
          name: "江苏",
          value: 0.88,
        },
      ],
      [
        {
          name: "安徽",
          value: 0.73,
        },
      ],
      [
        {
          name: "湖北",
          value: 0.75,
        },
      ],
      [
        {
          name: "浙江",
          value: 0.82,
        },
      ],
      [
        {
          name: "福建",
          value: 0.67,
        },
      ],
      [
        {
          name: "江西",
          value: 0.71,
        },
      ],
      [
        {
          name: "湖南",
          value: 0.75,
        },
      ],
      [
        {
          name: "广东",
          value: 0.78,
        },
      ],
      [
        {
          name: "海南",
          value: 0.1,
        },
      ],
      [
        {
          name: "新疆",
          value: 0,
        },
      ],
      [
        {
          name: "上海",
          value: 0.91,
        },
      ],
    ];

    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = chinaGeoCoordMap[dataItem[0].name];
        var toCoord = [119.4543, 25.9222]; //目的点
        if (fromCoord && toCoord) {
          res.push([
            {
              coord: fromCoord,
              value: dataItem[0].value,
            },
            {
              coord: toCoord,
            },
          ]);
        }
      }
      return res;
    };
    var series = [];
    [["泉州", chinaDatas]].forEach(function (item, i) {
      console.log(item);
      series.push(
        {
          type: "lines",
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: "arrow", //箭头图标
            symbolSize: 5, //图标大小
          },
          lineStyle: {
            normal: {
              width: 1, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
          data: convertData(item[1]),
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: "stroke", //波纹绘制方式 stroke, fill
            scale: 4, //波纹圆环最大限制，值越大波纹越大
          },
          label: {
            normal: {
              show: true,
              position: "right", //显示位置
              offset: [5, 0], //偏移设置
              formatter: function (params) {
                //圆环显示文字
                return params.data.name;
              },
              fontSize: 13,
            },
            emphasis: {
              show: true,
            },
          },
          symbol: "circle",
          symbolSize: function (val) {
            return 5 + val[2] * 5; //圆环大小
          },
          itemStyle: {
            normal: {
              show: false,
              color: "#f00",
            },
          },
          data: item[1].map(function (dataItem) {
            return {
              name: dataItem[0].name,
              value: chinaGeoCoordMap[dataItem[0].name].concat([
                dataItem[0].value,
              ]),
            };
          }),
        },
        //被攻击点
        {
          type: "scatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: "stroke",
            scale: 4,
          },
          label: {
            normal: {
              show: true,
              position: "right",
              //offset:[5, 0],
              color: "#0f0",
              formatter: "{b}",
              textStyle: {
                color: "#0f0",
              },
            },
            emphasis: {
              show: true,
              color: "#f60",
            },
          },
          symbol: "pin",
          symbolSize: 50,
          data: [
            {
              name: item[0],
              value: chinaGeoCoordMap[item[0]].concat([10]),
            },
          ],
        }
      );
    });

    let myChart = echarts.init(document.querySelector(".map"));

    option = {
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(166, 200, 76, 0.82)",
        borderColor: "#FFFFCC",
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: "z-index:100",
        formatter: function (params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          var res = "";
          var name = params.name;
          var value = params.value[params.seriesIndex + 1];
          res =
            "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
          return res;
        },
      },
      backgroundColor: "#013954",
      visualMap: {
        //图例值控制
        min: 0,
        max: 1,
        calculable: true,
        show: true,
        color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],
        textStyle: {
          color: "#fff",
        },
      },
      geo: {
        map: "china",
        zoom: 1.2,
        label: {
          emphasis: {
            show: false,
          },
        },
        roam: true, //是否允许缩放
        itemStyle: {
          normal: {
            color: "rgba(51, 69, 89, .5)", //地图背景色
            borderColor: "#516a89", //省市边界线00fcff 516a89
            borderWidth: 1,
          },
          emphasis: {
            color: "rgba(37, 43, 61, .5)", //悬浮背景
          },
        },
      },
      series: series,
    };
    myChart.setOption(option);
  }
  migrateChart();

  //列表自动轮播
  let $ul = $(".list-body");
  // console.log($ul);
  let htmlStr = "";
  for (let i = 0; i < 20; i++) {
    htmlStr += `<li class="list-item">
    <span>20210123</span>
    <span>广州市天河区吉山村101号房</span>
    <span>1008688</span>
  </li>`;
  }
  $ul.html(htmlStr);
});
